<template>
  <div class="fs-add-page">
    <el-form
      ref="formRef"
      :model="employeeForm"
      :rules="rules"
      label-width="120px"
      class="form-container"
    >
      <div class="section">
        <div class="section-header">
          <div class="section-title">
            <div class="title-bar"></div>
            <span>基本信息</span>
          </div>
        </div>
        <div class="base-info">
          <div class="form-content">
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="姓名" prop="name">
                  <el-input
                    v-model="employeeForm.name"
                    placeholder="请输入姓名"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="员工编号" prop="employeeId">
                  <el-input
                    v-model="employeeForm.employeeId"
                    placeholder="请输入员工编号"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属单位" prop="department">
                  <el-select
                    v-model="employeeForm.department"
                    placeholder="请选择所属单位"
                    class="full-width"
                  >
                    <el-option label="部门1" value="dept1" />
                    <el-option label="部门2" value="dept2" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="性别" prop="gender">
                  <el-select
                    v-model="employeeForm.gender"
                    placeholder="请选择性别"
                    class="full-width"
                  >
                    <el-option label="男" value="male" />
                    <el-option label="女" value="female" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="出生日期" prop="birthDate">
                  <el-date-picker
                    v-model="employeeForm.birthDate"
                    type="date"
                    placeholder="请选择出生日期"
                    class="full-width"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机号" prop="mobile">
                  <el-input
                    v-model="employeeForm.mobile"
                    placeholder="请输入手机号"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="民族" prop="ethnicity">
                  <el-select
                    v-model="employeeForm.ethnicity"
                    placeholder="请选择民族"
                    class="full-width"
                  >
                    <el-option label="汉族" value="han" />
                    <!-- 其他民族选项 -->
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="电子邮箱" prop="email">
                  <el-input
                    v-model="employeeForm.email"
                    placeholder="请输入电子邮箱"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="证件号码" prop="idNumber">
                  <el-input
                    v-model="employeeForm.idNumber"
                    placeholder="请输入证件号码"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="籍贯" prop="hometown">
                  <el-input
                    v-model="employeeForm.hometown"
                    placeholder="请输入籍贯"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="家庭住址" prop="address">
                  <el-input
                    v-model="employeeForm.address"
                    placeholder="请输入家庭住址"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="健康状况" prop="healthStatus">
                  <el-input
                    v-model="employeeForm.healthStatus"
                    placeholder="请输入健康状况"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <div class="avatar-section">
            <el-form-item label="">
              <div class="avatar-wrapper">
                <el-upload
                  class="avatar-uploader"
                  action="/api/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <div class="avatar-content">
                    <img
                      v-if="employeeForm.avatar"
                      :src="employeeForm.avatar"
                      class="avatar-image"
                    />
                    <div v-else class="avatar-placeholder">
                      <el-icon class="avatar-icon"><Plus /></el-icon>
                      <span class="upload-text">点击上传头像</span>
                    </div>
                  </div>
                </el-upload>
                <div class="avatar-tips">支持 JPG 格式，大小不超过 2MB</div>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="section-header">
          <div class="section-title">
            <div class="title-bar"></div>
            <span>专业信息</span>
          </div>
        </div>
        <div class="section-content">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="行政级别" prop="administrativeLevel">
                <el-input
                  v-model="employeeForm.administrativeLevel"
                  placeholder="请输入行政级别"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="现任职务" prop="position">
                <el-input
                  v-model="employeeForm.position"
                  placeholder="请输入现任职务"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="现任职务时间" prop="positionStartDate">
                <el-date-picker
                  v-model="employeeForm.positionStartDate"
                  type="date"
                  placeholder="请选择时间"
                  class="full-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="婚姻状况" prop="maritalStatus">
                <el-select
                  v-model="employeeForm.maritalStatus"
                  placeholder="请选择婚姻状况"
                  class="full-width"
                >
                  <el-option label="未婚" value="single" />
                  <el-option label="已婚" value="married" />
                  <el-option label="离异" value="divorced" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="是否出国留学" prop="overseasEducation">
                <el-select
                  v-model="employeeForm.overseasEducation"
                  placeholder="请选择"
                  class="full-width"
                >
                  <el-option label="是" :value="true" />
                  <el-option label="否" :value="false" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="政治面貌" prop="politicalStatus">
                <el-select
                  v-model="employeeForm.politicalStatus"
                  placeholder="请选择政治面貌"
                  class="full-width"
                >
                  <el-option label="党员" value="party" />
                  <el-option label="群众" value="mass" />
                  <!-- 其他选项 -->
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="占编情况" prop="establishmentStatus">
                <el-input
                  v-model="employeeForm.establishmentStatus"
                  placeholder="请输入占编情况"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="入职时间" prop="entryDate">
                <el-date-picker
                  v-model="employeeForm.entryDate"
                  type="date"
                  placeholder="请选择入职时间"
                  class="full-width"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="section">
        <div class="section-header">
          <div class="section-title">
            <div class="title-bar"></div>
            <span>最高教育信息</span>
          </div>
        </div>
        <div class="section-content">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="教育类型" prop="educationType">
                <el-select
                  v-model="employeeForm.educationType"
                  placeholder="请选择教育类型"
                  class="full-width"
                >
                  <el-option label="全日制" value="fulltime" />
                  <el-option label="非全日制" value="parttime" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="毕业院校" prop="graduateSchool">
                <el-input
                  v-model="employeeForm.graduateSchool"
                  placeholder="请输入毕业院校"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所学专业" prop="major">
                <el-input
                  v-model="employeeForm.major"
                  placeholder="请输入所学专业"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="学历" prop="educationLevel">
                <el-select
                  v-model="employeeForm.educationLevel"
                  placeholder="请选择学历"
                  class="full-width"
                >
                  <el-option label="博士" value="phd" />
                  <el-option label="硕士" value="master" />
                  <el-option label="本科" value="bachelor" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="学位" prop="degree">
                <el-select
                  v-model="employeeForm.degree"
                  placeholder="请选择学位"
                  class="full-width"
                >
                  <el-option label="博士" value="phd" />
                  <el-option label="硕士" value="master" />
                  <el-option label="学士" value="bachelor" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="section">
        <div class="section-header">
          <div class="section-title">
            <div class="title-bar"></div>
            <span>子表信息</span>
          </div>
        </div>
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="工作经历" name="first">
            <el-table :data="tableData" style="width: 100%" height="250">
              <el-table-column fixed prop="date" label="Date" width="150" />
              <el-table-column prop="name" label="Name" width="120" />
              <el-table-column prop="state" label="State" width="120" />
              <el-table-column prop="city" label="City" width="320" />
              <el-table-column prop="address" label="Address" width="600" />
              <el-table-column prop="zip" label="Zip" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="教育经历" name="second">
            <el-table :data="tableData" style="width: 100%" height="250">
              <el-table-column fixed prop="date" label="Date" width="150" />
              <el-table-column prop="name" label="Name" width="120" />
              <el-table-column prop="state" label="State" width="120" />
              <el-table-column prop="city" label="City" width="320" />
              <el-table-column prop="address" label="Address" width="600" />
              <el-table-column prop="zip" label="Zip" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="奖励信息" name="third">
            <el-table :data="tableData" style="width: 100%" height="250">
              <el-table-column fixed prop="date" label="Date" width="150" />
              <el-table-column prop="name" label="Name" width="120" />
              <el-table-column prop="state" label="State" width="120" />
              <el-table-column prop="city" label="City" width="320" />
              <el-table-column prop="address" label="Address" width="600" />
              <el-table-column prop="zip" label="Zip" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="家庭成员" name="fourth">
            <el-table :data="tableData" style="width: 100%" height="250">
              <el-table-column fixed prop="date" label="Date" width="150" />
              <el-table-column prop="name" label="Name" width="120" />
              <el-table-column prop="state" label="State" width="120" />
              <el-table-column prop="city" label="City" width="320" />
              <el-table-column prop="address" label="Address" width="600" />
              <el-table-column prop="zip" label="Zip" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-form>
    <div class="footer">
      <el-button @click="onBack">返回</el-button>
      <el-button @click="onSaveDraft">保存草稿</el-button>
      <el-button class="submit" type="primary" @click="onSubmit"
        >提交</el-button
      >
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import { defineComponent, reactive, ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-08",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-06",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
];

// 定义类型
interface EmployeeForm {
  // 基本信息
  name: string;
  employeeId: string;
  department: string;
  gender: string;
  birthDate: string;
  mobile: string;
  email: string;
  idNumber: string;
  position: string;
  hometown: string;
  address: string;
  healthStatus: string;
  avatar: string;

  // 专业信息
  administrativeLevel: string;
  currentPosition: string;
  positionStartDate: string;
  maritalStatus: string;
  ethnicity: string;
  overseasEducation: boolean;
  politicalStatus: string;
  establishmentStatus: string;
  entryDate: string;

  // 教育信息
  educationType: string;
  graduateSchool: string;
  major: string;
  educationLevel: string;
  degree: string;
}

// 定义表单数据
const employeeForm = reactive<EmployeeForm>({
  name: "",
  employeeId: "",
  department: "",
  gender: "",
  birthDate: "",
  mobile: "",
  email: "",
  idNumber: "",
  position: "",
  hometown: "",
  address: "",
  healthStatus: "",
  avatar: "",

  administrativeLevel: "",
  currentPosition: "",
  positionStartDate: "",
  maritalStatus: "",
  ethnicity: "",
  overseasEducation: false,
  politicalStatus: "",
  establishmentStatus: "",
  entryDate: "",

  educationType: "",
  graduateSchool: "",
  major: "",
  educationLevel: "",
  degree: "",
});

const resourceForm = reactive({
  resources: [
    {
      resourceType: "",
      executionTime: "",
      calculationUnit: "",
      dailyQuantity: "",
      netUnitPrice: "",
      remark: "",
    },
  ],
});

const dialogVisible = ref(false);
const dialogImageUrl = ref("");

const handlePictureCardPreview = (file: any) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};

const handleRemove = (file: any, fileList: any) => {
  console.log(file, fileList);
};

const submitForm = () => {
  console.log("提交表单", employeeForm);
};

const resetForm = () => {
  Object.assign(employeeForm, {
    name: "",
    employeeId: "",
    department: "",
    gender: "",
    birthDate: "",
    mobile: "",
    email: "",
    idNumber: "",
    position: "",
    hometown: "",
    address: "",
    healthStatus: "",
    avatar: "",

    administrativeLevel: "",
    currentPosition: "",
    positionStartDate: "",
    maritalStatus: "",
    ethnicity: "",
    overseasEducation: false,
    politicalStatus: "",
    establishmentStatus: "",
    entryDate: "",

    educationType: "",
    graduateSchool: "",
    major: "",
    educationLevel: "",
    degree: "",
  });
};

const addResource = () => {
  resourceForm.resources.push({
    resourceType: "",
    executionTime: "",
    calculationUnit: "",
    dailyQuantity: "",
    netUnitPrice: "",
    remark: "",
  });
};

const removeResource = (index: number) => {
  resourceForm.resources.splice(index, 1);
};

const rules = {
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  employeeId: [{ required: true, message: "请输入员工编号", trigger: "blur" }],
  mobile: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: "blur",
    },
  ],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱格式", trigger: "blur" },
  ],
  idNumber: [
    { required: true, message: "请输入证件号码", trigger: "blur" },
    {
      pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
      message: "请输入正确的身份证号",
      trigger: "blur",
    },
  ],
};

const formRef = ref();

const onSubmit = async () => {
  if (!formRef.value) return;

  try {
    await formRef.value.validate();
    // TODO: 调用API保存数据
    ElMessage.success("提交成功");
  } catch (error) {
    ElMessage.error("表单验证失败，请检查必填项");
  }
};

const onSaveDraft = () => {
  // TODO: 保存草稿逻辑
  localStorage.setItem("employeeFormDraft", JSON.stringify(employeeForm));
  ElMessage.success("草稿保存成功");
};

const onBack = () => {
  // TODO: 返回上一页
  router.back();
};

// 处理头像上传
const handleAvatarSuccess = (response: any, file: any) => {
  employeeForm.avatar = URL.createObjectURL(file.raw);
};

const beforeAvatarUpload = (file: any) => {
  const isJPG = file.type === "image/jpeg";
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG) {
    ElMessage.error("上传头像图片只能是 JPG 格式!");
  }
  if (!isLt2M) {
    ElMessage.error("上传头像图片大小不能超过 2MB!");
  }
  return isJPG && isLt2M;
};
</script>
  
<style lang="scss" scoped>
.fs-add-page {
  padding: 20px;
  padding-bottom: 80px;
  background-color: #f5f7fa;

  .section {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .section-header {
      margin-bottom: 24px;

      .section-title {
        display: flex;
        align-items: center;

        .title-bar {
          width: 4px;
          height: 16px;
          background: #409eff;
          border-radius: 2px;
          margin-right: 8px;
        }

        span {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
          line-height: 1.5;
        }
      }
    }

    .section-content {
      :deep(.el-form-item) {
        margin-bottom: 24px;

        .el-form-item__label {
          padding-right: 8px;
        }
      }

      :deep(.el-input__wrapper),
      :deep(.el-select .el-input__wrapper),
      :deep(.el-date-editor.el-input__wrapper) {
        padding: 0 8px;
      }
    }
  }

  .base-info {
    display: flex;
    align-items: flex-start;

    .form-content {
      flex: 3;

      .el-row {
        margin-bottom: 24px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .avatar-section {
      flex: 1;
      padding-top: 32px; // 调整头像区域的上边距以达到视觉上的垂直居中

      .avatar-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .avatar-uploader {
        width: 120px;
        height: 120px;
        border: 1px dashed #d9d9d9;
        border-radius: 8px;
        cursor: pointer;
        overflow: hidden;
        transition: all 0.3s;
        display: flex;
        justify-content: center;
        align-items: center;

        &:hover {
          border-color: #409eff;
          background-color: #f5f7fa;
        }

        .avatar-content {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .avatar-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .avatar-placeholder {
          display: flex;
          flex-direction: column;
          align-items: center;
          color: #8c939d;

          .avatar-icon {
            font-size: 28px;
            margin-bottom: 8px;
          }

          .upload-text {
            font-size: 12px;
          }
        }
      }

      .avatar-tips {
        margin-top: 8px;
        font-size: 12px;
        color: #909399;
        text-align: center;
      }

      :deep(.el-form-item__label) {
        text-align: center;
        float: none;
        display: block;
        margin-bottom: 8px;
      }
    }
  }

  // 统一表单控件样式
  :deep(.el-input__wrapper),
  :deep(.el-select .el-input__wrapper),
  :deep(.el-date-editor.el-input__wrapper) {
    box-shadow: 0 0 0 1px #dcdfe6 inset;
    padding: 0 11px;
    border-radius: 4px;
    height: 32px;
    line-height: 32px;

    &:hover {
      box-shadow: 0 0 0 1px #c0c4cc inset;
    }

    &.is-focus {
      box-shadow: 0 0 0 1px #409eff inset;
    }
  }

  :deep(.el-input__inner) {
    height: 32px;
    line-height: 32px;
    padding: 0;
  }

  :deep(.el-select) {
    width: 100%;

    .el-input {
      height: 32px;
      line-height: 32px;
    }
  }

  :deep(.el-date-editor.el-input) {
    width: 100%;

    .el-input__wrapper {
      padding: 0 8px;
    }

    .el-input__prefix {
      height: 32px;
      line-height: 32px;
    }

    .el-input__suffix {
      height: 32px;
      line-height: 32px;
    }
  }

  :deep(.el-form-item) {
    margin-bottom: 0;

    .el-form-item__label {
      height: 32px;
      line-height: 32px;
      padding-bottom: 0;
    }

    .el-form-item__content {
      line-height: 32px;
      min-height: 32px;
    }
  }

  :deep(.el-select-dropdown__item) {
    height: 32px;
    line-height: 32px;
  }

  :deep(.el-input__icon) {
    height: 32px;
    line-height: 32px;
  }

  // Tabs样式优化
  :deep(.el-tabs__header) {
    margin-bottom: 16px;
  }

  :deep(.el-tabs__nav-wrap::after) {
    height: 1px;
  }

  :deep(.el-tabs__item) {
    height: 40px;
    line-height: 40px;
  }

  :deep(.el-table) {
    border-radius: 4px;
    overflow: hidden;
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 24px;
  background: #fff;
  box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, 0.05);
  text-align: right;
  z-index: 100;

  .el-button + .el-button {
    margin-left: 12px;
  }
}

// 全局样式覆盖
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

.full-width {
  width: 100%;
}
</style>